<template>
	<view class="y bg-white">
		<!-- scroll-view是滑动组件，给他固定高度后，就可以实现内部滑动，然后不影响最底部的发送模块
		 :scroll-into-view实现动态滑动到最新的消息框，高度100vh;距离底部内边距120rpx=60px,因为底部还有一个发送内容为60px高度;
		 -->
		<scroll-view scroll-y="true" style="height:100vh;padding-bottom: 120rpx;" :scroll-into-view="'id'+(id-1)">
			<view class="y" v-for="(item,index) in list" :id="'id'+item.id">
				<!-- 我发给别人的 -->
				<!-- justify-end  justify-content: flex-end;，设置内容在最右边 -->
				<view class="x padding-sm justify-end" v-if="item.type==2">
					<!-- 通过max-width：80%，去掉原来的flex：1，实现宽度自适应 -->
					<view class=" bg-green radius padding-sm margin-right-sm" style="max-width: 80%;">{{item.content}}
					</view>
					<image src="../../static/头像 男孩 (1).svg" style="width: 40px;height: 40px;"></image>
				</view>
				<!-- 别人发给我的 -->
				<view class="x padding-sm" v-if="item.type==1">
					<image src="../../static/头像 女孩 (5).svg" style="width: 40px;height: 40px;"></image>
								<!-- 通过max-width：80%，去掉原来的flex：1，实现宽度自适应 -->
					<view class=" bg-orange radius padding-sm margin-left-sm" style="max-width: 80%;">{{item.content}}
					</view>
				</view>
			</view>
		</scroll-view>
		<view style="position: absolute;bottom: 0;width:100vw ;height: 60px;background-color: #eee;" class="wrap-row ">
			<input class="bg-white flex-sub margin-lr-sm" style="height: 40px;border-radius: 20px;padding-left: 10px;"
				placeholder="请输入发送的内容" v-model="msg" @confirm="send"/>
			<view class="padding-lr padding-tb-xs bg-green radius margin-right" @click="send" >发送</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: '', //接收输入框的内容
				id:1,//记录每次最新的消息ID，用来自动滑动到最底部最新的消息界面
				list: [

				] //存消息的一个数据
			}
		},
		methods: {
			send() {
				this.list.push({
					id:this.id,//设置id
					type: 2, //表示这是我发给别人的
					content: this.msg
				}) //往数组里面添加数据
				this.id++//id自增长1
				uni.showLoading({
					title: "发送中"
				})
				uni.request({
					url: "https://api.lolimi.cn/API/AI/jj.php?msg=" +
						this.msg,
					success: (res) => { //接收到回复
						console.log(res)
						uni.hideLoading()
						this.msg = ''
						this.list.push({
							id:this.id,//设置id
							type: 1, //表示这是别人发给我的
							content: res.data.data.output
						}) //往数组里面添加数据
						this.id++//id自增长1
					}
				})
			}
		}
	}
</script>

<style>

</style>